<template>
    <div class="content">
        <h1>列表展示</h1>
        <button @click="$emit('on-t')">点击退出登录</button>
        <h2>
            <img width="50" :src="userInfo.headimgurl" alt="">
            昵称：
           <span>{{ userInfo.nickname }}</span>
        </h2>
        <ul>
            <li v-for="item in lists" :key="item._id">
                <b>{{item.name}}</b>
                <button v-has:read="buttons">查看</button>
                <button v-has:edit="buttons">修改</button>
                <button v-has:delet="buttons">删除</button>
                <button v-has:add="buttons">增加</button>
            </li>
        </ul>
    </div>
</template>
<script>
import Vue from 'vue'
Vue.directive('has',{
    inserted(el,binding){
        let role = binding.arg
        let userRole = binding.value
        let hasRole=userRole.includes(role)
        if(!hasRole){
            el.disabled =true
        }
    }
})
    export default{
        props:{
            isLogin:{
                type:Boolean
            }, 
            userInfo:{
                type:Object
            },
            buttons:{
                type:Array
            },
        },
    mounted() {
        //获取列表的请求
        fetch('http://chst.vip/students/getstulist?count=10', {
            headers: {
                'authorization': sessionStorage.getItem('user-token')
            }
        })
            .then(body => body.json())
            .then(res => {
                if(res.state){
                    this.lists =res.data
                    console.log(res);
                }else{
                    alert(res.msg)
                }
                
            })
            .catch(err => err.toString())
    },
    methods:{
        logout() {
           console.log(isLogin);
            
        }
    },
    data(){
        return{
            lists:[]
        }
    }
    }
</script>